<template>
    <div>
   <h2>门店列表</h2>
   <input type="button" value="导出" @click="dataexp"><br>
   门店名称：<br><input type="text" v-model="state.mName"><br>
   状态：<br><input type="text" v-model="state.state"><br>
   <input type="button" value="查询" @click="getlist">
   <table class="table table-bordered" border="1">
        <tr>
            <td>ID</td>
            <td>门店名称</td>
            <td>分店名称</td>
            <td>商户地址</td>
            <td>门店图片</td>
            <td>门店状态</td>
            <td>信息录入时间</td>
            <td>操作</td>
        </tr>
        <tr v-for="item in list">
            <td>{{item.ID}}</td>
            <td>{{item.MName}}</td>
            <td>{{item.FName}}</td>
            <td>{{item.SAddr}}</td>
            <td>
                <img :src="item.Pic" alt="" width="60" height="60">
            </td>
            <td>{{item.State==1?'显示':'隐藏'}}</td>
            <td>{{moment().format(item.DateTime)}}</td>
            <td>
                <input type="button" v-if="item.State==1" value="隐藏" @click="updstate(item.ID,item.State)">
                <input type="button" v-else value="显示" @click="updstate(item.ID,item.State)">
                <input type="button" value="修改" @click="UpdateMD(item.ID)">
            </td>
        </tr>
   </table>
   <span>总条数{{totalcount}}</span>
    <span>总页数{{totalpage}}</span>
    <span>当前第{{state.index}}/{{totalpage}}页</span>
    <input type="button" value="首页" @click="page('1')">
    <input type="button" value="上一页" @click="page('2')">
    <input type="button" value="下一页" @click="page('3')">
    <input type="button" value="尾页" @click="page('4')">
</div>
</template>

<script setup lang="ts">
import { onMounted,reactive,toRefs } from 'vue';
import axios from 'axios';
import {useRouter,useRoute} from 'vue-router';
import moment from 'moment';

let router=useRouter();
let data:any=reactive({
    state:{
        mName:'',
        state:'',
        index:1,
        size:2
    },
    list:[],
    totalpage:0,
    taotalcount:0
})
let {state,list,totalcount,totalpage}=toRefs(data)
onMounted(()=>{
    getlist()
})
const page=(str:any)=>{
    switch(str){
        case "1":
            if(state.value.index==1){
                alert("已经是第一页了")
                return;
            }
            state.value.index=1;
            break;
            case "2":
            if(state.value.index==1){
                alert("已经是第一页了")
                return;
            }
            state.value.index--;
            break;
        case "3":
            if(state.value.index==totalpage.value){
                alert("已经是最后一页了")
                return;
            }   
            state.value.index++;
            break;
        case "4":
            if(state.value.index==totalpage.value){
                alert("已经是最后一页了")
                return;
            }
            state.value.index=totalpage.value;
            break;
    }
    getlist()  
}
const getlist=()=>{
    let obj={
        name:state.value.mName,
        state:state.value.state,
        index:state.value.index,
        size:state.value.size
    }
    axios({
        url:'https://localhost:7231/api/MenDian/GetMendian',
        method:'get',
        params:obj
    })
    .then(res=>{
        console.log(res)
        list.value=res.data.data
        totalpage.value=res.data.totalpage
        totalcount.value=res.data.totalcount
    })
    
    .catch(err=>{
        console.log(err)
    })
}
const updstate=(id:any,state:any)=>{
    let obj={
        id:id,
        state:state
    }
    axios({
        url:'https://localhost:7231/api/MenDian/updState',
        method:'post',
        params:obj
    })
    .then(res=>{
        console.log(res)
        if(res.data==1){
            alert("修改成功")
            getlist()
        }
        else{
            alert("修改失败")
            return;
        }
    })
    .catch(err=>{
        console.log(err)
    })
}

const UpdateMD=(id:any)=>{
    router.push({
        name:'UpdateMD',
        params:{
            id:id
        }
    })
}
//导出
const dataexp=()=>{
    axios.get('https://localhost:7231/api/MenDian/DataExp',{
        params:{
            PathName:"C:\\Users\\86137\\Desktop\\9.3zuoye\\门店信息.xlsx"
        }
    })
    .then(res=>{
        if(res.data>0){
            alert('导出成功');
        }
    })
    .catch(err=>{
        console.log(err)
    })
}

</script>

<style scoped>

</style>